<template>
  <div>
    <!-- 我的订单： -->
    <div
      class="table-list"
      v-if="pageType == 0"
    >
      <!-- 菜单 滑动标签 -->
      <div class="tabs clearfix">
        <p
          v-for="(item, index) in tabsNav"
          :key="index"
          :class="[tabsIndex == index ? 'active' : '']"
          @click="tabsHandle(index)"
        >
          {{ item }}
        </p>
      </div>

      <!-- 产权交易订单 列表表格 -->
      <div v-if="tabsIndex == 0">
        <el-table
          :data="dealList"
          style="width: 100%"
          height="350"
          v-loading="loading"
          max-height="350"
          border
        >
          <el-table-column label="序号" type="index" align="center" width="50">
          </el-table-column>

          <el-table-column
            prop="name"
            label="转让标的名称"
            align="center"
            
          >
          </el-table-column>
          <el-table-column
            prop="number"
            label="项目编号"
            align="center"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="offerEndTime"
            label="竞标结束日期"
            align="center"
            width="130"
          >
          </el-table-column>
          <el-table-column
            prop="offer"
            label="竞标金额"
            align="center"
            width="80"
          >
          </el-table-column>
          <el-table-column
            prop="operateTime"
            label="竞标时间"
            align="center"
            width="120"
          >
          </el-table-column>
          <el-table-column prop="isWin" label="状态" align="center" width="80">
            <template slot-scope="scope">
              <p class="status" v-if="scope.row.isWin == '0'">
                <span class="audit-nopass"></span>未中
              </p>
              <p v-if="scope.row.isWin == '1'" class="status">
                <span class="audit-pass"></span>已中
              </p>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="120">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="toProductDealDetail(scope.row.id)"
                type="text"
                size="small"
                style="color: #e17e0a"
              >
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 农产品订单 列表表格 -->
      <div v-else-if="tabsIndex == 1">
        <el-table
          :data="framList"
          style="width: 100%"
          height="350"
          v-loading="loading"
          max-height="350"
          border
        >
          <el-table-column label="序号" type="index" align="center" width="50">
          </el-table-column>
          <el-table-column prop="id" label="订单号" align="center" width="100">
          </el-table-column>
          <el-table-column
            prop="providerName"
            label="商户名称"
            align="center"
            width="130"
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="下单时间"
            align="center"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="总金额"
            align="center"
            width="80"
          >
          </el-table-column>
          <el-table-column prop="name" label="收货人" align="center" width="80">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="收货人电话"
            align="center"
            width="80"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="收货地址"
            align="center"
            width="80"
          >
          </el-table-column>
          <el-table-column
            prop="orderStatus"
            label="订单状态"
            align="center"
            width="80"
          >
            <template slot-scope="scope">
              <p class="status" v-if="scope.row.orderStatus == '0'">
                <span class="auditing"></span>待发货
              </p>
              <p v-if="scope.row.orderStatus == '1'" class="status">
                <span class="audit-pass"></span>已发货
              </p>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="130">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="lookDetail(scope.row.id,'NCP')"
                type="text"
                size="small"
                style="color: #e17e0a"
              >
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 农资产品订单 列表表格 -->
      <div v-else>
        <el-table
          :data="framProductList"
          style="width: 100%"
          height="350"
          v-loading="loading"
          max-height="350"
          border
        >
          <el-table-column label="序号" type="index" align="center" width="50">
          </el-table-column>
          <el-table-column prop="id" label="订单号" align="center" width="100">
          </el-table-column>
          <el-table-column
            prop="providerName"
            label="商户名称"
            align="center"
            width="130"
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="下单时间"
            align="center"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="总金额"
            align="center"
            width="80"
          >
          </el-table-column>
          <el-table-column prop="name" label="收货人" align="center" width="80">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="收货人电话"
            align="center"
            width="80"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="收货地址"
            align="center"
            width="80"
          >
          </el-table-column>
          <el-table-column
            prop="orderStatus"
            label="订单状态"
            align="center"
            width="80"
          >
            <template slot-scope="scope">
              <p class="status" v-if="scope.row.orderStatus == '0'">
                <span class="auditing"></span>待发货
              </p>
              <p v-if="scope.row.orderStatus == '1'" class="status">
                <span class="audit-pass"></span>已发货
              </p>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="120">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="lookDetail(scope.row.id,'NZ')"
                type="text"
                size="small"
                style="color: #e17e0a"
              >
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 公用分页底部 -->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 产权交易订单详情： -->
    <div class="detail" v-if="pageType == 1">
      <productDealDetail @backPrev="pageType = 0" ref="orderProductDetailDom" />
    </div>

    <!-- 产品订单详情： （"农产品订单", "农资产品订单" 这两个订单详情与列表都是一样的） -->
    <div class="detail" v-if="pageType == 2">
      <orderDetail @backPrev="pageType = 0" ref="orderDEtailDom" />
    </div>
  </div>
</template>
<script>
import Cookie from "js-cookie";
import orderDetail from "./orderDetail";
import productDealDetail from "./productDealDetail";
export default {
  components: {
    productDealDetail,
    orderDetail,
  },
  data() {
    return {
      tabsNav: ["产权交易订单", "农产品订单", "农资产品订单"],
      pageType: 0,
      tableData: [{}, {}],
      framList: [],
      framProductList: [], //农资产品订单
      dealList: [], // 产权交易
      tabsIndex: 0,
      pageNum: 1,
      pageSize: 10,
      total: 100,

      loading: false,
    };
  },
  mounted() {
    this.getDealList(); //产权交易订单
  },
  methods: {
    // 农产品订单
    getFramList() {
      this.loading = true;
      this.$http("get", "/sys/placeOrder/findMaterialCorpsPage.do", {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      })
        .then((res) => {
          if (res.code == "0000") {
            var data = res.result;
            this.framList = data.rows;
            this.total = data.total;
          }
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 农资产品列表
    getFramProductList() {
      this.loading = true;
      this.$http("get", "/sys/placeOrder/findMaterialProductsPage.do", {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      })
        .then((res) => {
          if (res.code == "0000") {
            var data = res.result;
            this.framProductList = data.rows;
            this.total = data.total;
          }
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 产权交易订单分页列表
    getDealList() {
      this.loading = true;

      this.$http("get", "/sys/placeOrder/findMyPropertyPage.do", {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      })
        .then((res) => {
          if (res.code == "0000") {
            var data = res.result;
            this.dealList = data.rows;
            this.total = data.total;
          }
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    // 去产权交易详情
    toProductDealDetail(id) {
      this.pageType = 1;
      this.$nextTick(() => {
        this.$refs.orderProductDetailDom.getDetail(id);
      });
    },

    // 农产品和农资产品订单详情
    lookDetail(id,pageType) {
      this.pageType = 2;
      this.$nextTick(() => {
        this.$refs.orderDEtailDom.getDetail(id,pageType);
      });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      if (this.tabsIndex == 0) {
        this.getDealList(); //产权交易订单
      } else if (this.tabsIndex == 1) {
        this.getFramList(); // 农产品订单
      } else {
        this.getFramProductList(); //农资产品列表
      }
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      if (this.tabsIndex == 0) {
        this.getDealList(); //产权交易订单
      } else if (this.tabsIndex == 1) {
        this.getFramList(); // 农产品订单
      } else {
        this.getFramProductList(); //农资产品列表
      }
      this.getList();
    },

    tabsHandle(index) {
      this.pageNum = 1;
      this.pageSize = 10;
      if (index == 0) {
        this.getDealList(); //产权交易订单
      } else if (index == 1) {
        this.getFramList(); // 农产品订单
      } else {
        this.getFramProductList(); //农资产品列表
      }
      this.tabsIndex = index;
    },
  },
};
</script>
<style scoped>
.table-list {
   background: #fff;
        padding-bottom: 20px;
        margin-left: 10px;
        padding: 0 34px;
}
.auditing {
  width: 6px;
  height: 6px;
  background: #1890ff;
  display: inline-block;
  border-radius: 6px;
}
.audit-pass {
  width: 6px;
  height: 6px;
  background: #52c41a;
  display: inline-block;
  border-radius: 6px;
}
.audit-nopass {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #f7515a;
  border-radius: 6px;
}
.status {
  font-weight: 400;
  font-size: 14px;
  vertical-align: middle;
}
.status span {
  margin-right: 5px;
  vertical-align: middle;
}
.pagination {
  margin-top: 30px;
  margin-left: 200px;
  padding-bottom: 30px;
}
.look-contrac a {
  color: #1890ff;
  display: block;
}
.look-contrac a:hover {
  text-decoration: underline;
}
.tabs {
  padding-top: 30px;
  margin-bottom: 20px;
}
.tabs p {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  padding-bottom: 10px;
  float: left;
  margin-right: 40px;
  cursor: pointer;
}
.tabs p.active {
  color: #f48d06;
  border-bottom: 1px solid #f48d06;
}
</style>
